<template>
	<view class="flDetail">
		<view class="shaixuanArea1" v-if="ifShowV">
			<view v-if="tags.length>0" class="tiaojian clearfix">
				<view class="li" v-for="(item, index) in tags" :key="index" :data-name="item.tag_name" :id="item.id" :data-index="index" :class="tj1Index == index ? 'active' : ''"
				 @click="tj1">{{item.tag_name}}</view>
			</view>
			<view v-if="tj2List.length>0" class="tiaojian clearfix">
				<view class="li" v-for="(item, index) in tj2List" :key="index" :data-name="item.name" :data-id="item.id" :class="tj2Index == item.id ? 'active' : ''"
				 @click="tj2">{{item.name}}</view>
			</view>
			<view v-if="tj3List.length>0" class="tiaojian clearfix">
				<view class="li" v-for="(item, index) in tj3List" :key="index" :data-name="item.name" :data-id="item.id" :class="tj3Index == item.id ? 'active' : ''" @click="tj3">{{item.name}}</view>
			</view>
		</view>
		<view class="sxArea2" v-if="!ifShowV">
			<view class="shou" @click="zhankai">
				<text>{{tjname1}}{{douhao1}}{{tjname2}}，{{tjname3}}<image src="../../../../static/btn_xl_red.png" mode=""></image></text>
				
			</view>
		</view>
		<view class="fldMain" :style="{paddingTop: paddingTop}">
			<view class="bookArea clearfix">
				<block v-for="(item, index) in booksList" :key="index">
					<view class="landscapeBook" :data-id="item.id" @click="tobook">
						<image :src="item.img" mode=""></image>
						<!-- <lazy-image class="lazy-image" :realSrc="item.img" :placeholdSrc="placeholderSrc"></lazy-image> -->
						<view class="textIntroducte">
							<text class="title">{{item.name}}</text>
							<text class="introducte">{{item.desc}}</text>
							<text class="author">{{item.author}}</text>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	
	import key from "../../../../common/key.js";
	import utils from '../../../../common/utils.js';
	import lazyImage from "@/components/turboni-lazyload/lazy-image.vue"
	export default {
		data() {
			return {
				paddingTop: '180upx',
				placeholderSrc:'../../../static/logo.png',
				ifShowV: true,
				ifshow2: false,
				tags: [],
				tagId: '',
				booksList:[],
				cate_id: '',
				tj1Index: 0,
				tj2Index: 0,
				tj3Index: 'bookcase_num',
				tjname1: '',
				tjname2: '全部',
				tjname3: '按最热',
				douhao1: '，',
				tj2List: [
					{
						name: '全部',
						id: 0
					},
					{
						name: '连载',
						id: 1
					},
					{
						name: '完结',
						id: 2
					}
				],
				tj3List: [
					{
						name: '按最热',
						id: 'bookcase_num'
					},
					{
						name: '按最新',
						id: 'created_at'
					}
				]
			}
		},
		onLoad(option) {
			this.cate_id = option.id;
		},
		components: {
			lazyImage
		},
		created() {
			this.tagsFn();
		},
		onPageScroll(e) {
			console.log(e.scrollTop)
			if(e.scrollTop>60){
				this.ifShowV = false
			} else {
				this.ifShowV = true
			}
		},
		methods: {
			tj1(e){
				var index = e.currentTarget.dataset.index;
				var id = e.currentTarget.id;
				this.tj1Index = index ;
				this.loadFn(this.tj3Index, this.tj2Index, id);
			},
			tj2(e){
				var id = e.currentTarget.dataset.id;
				this.tj2Index = id;
				this.loadFn(this.tj3Index, this.tj2Index, this.tagId);
			},
			tj3(e){
				var id = e.currentTarget.dataset.id;
				this.tj3Index = id;
				this.loadFn(this.tj3Index, this.tj2Index, this.tagId);
			},
			zhankai(){
				this.ifShowV = !this.ifShowV
			},
			tobook(e){
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/childPages/bookDetail/bookDetail?book_id=' + id
				})
			},
			tagsFn(){
				var that = this;
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 1054418,
					"t_channel": "YLXS_Android",
					"version": "4.1.0",
					"cate_id": this.cate_id
				}
				
				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}v4/cate/tag`,
					method: "POST",
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					dataType: 'json',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 1054418,
						"t_channel": "YLXS_Android",
						"version": "4.1.0",
						"cate_id": this.cate_id,
						"sign": sign
					},
					success: (res) => {
						var query = uni.createSelectorQuery();
						query.select('.shaixuanArea1').boundingClientRect()
						query.exec(function(res){
							this.paddingTop = res.height + 10 + 'px'
						})
						this.tags = res.data.data.has_many_tag;
						if(this.tags.length == 0){
							this.tjname1 = '';
							this.douhao1 = ' ';
							this.loadFn(this.tj3Index, this.tj2Index, 0);
						} else {
							this.douhao1 = '，';
							this.tagId = this.tags[0].id;
							this.tjname1 = this.tags[0].tag_name;
							console.log(this.tagId)
							this.loadFn(this.tj3Index, this.tj2Index, this.tagId);
						}
					}
				})
			},
			loadFn(is_new_hot, is_over, tagId){
				var that = this;
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 1054418,
					"t_channel": "YLXS_Android",
					"version": "4.1.0",
					"cate_id": this.cate_id,
					"is_new_hot": is_new_hot,
					"is_over": is_over,
					"tag": tagId
				}
				
				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}v4/cate/list`,
					method: "POST",
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					dataType: 'json',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 1054418,
						"t_channel": "YLXS_Android",
						"version": "4.1.0",
						"cate_id": this.cate_id,
						"is_new_hot": is_new_hot,
						"is_over": is_over,
						"tag": tagId,
						"sign": sign
					},
					success: (res) => {
						var data = res.data.data.data;
						if(data.length > 0){
							data.forEach((val, index, arr) => {
								val.img = utils.imgMd5(val.img);
							})
							this.booksList = data;
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.flDetail{
		width: 100%;
	}
	.shaixuanArea1{
		width: 690upx;
		height: auto;
		margin: 0 auto;
		background: #fff;
		position: fixed;
		top: 0;
		left: 30upx;
		z-index: 12;
	}
	.shaixuanArea1 .tiaojian{
		width: 100%;
		border-bottom: 1px solid #F8F8F8;
		padding: 10upx 0;
		margin: 0;
	}
	.shaixuanArea1 .tiaojian:last-child{
		border-bottom: none;
	}
	.shaixuanArea1 .tiaojian .li{
		font-size: 28upx;
		line-height: 40upx;
		color: #4B4C60;
		padding: 4upx 18upx;
		float: left;
		margin: 8upx 0;
		margin-right: 20upx;
		border: 1px solid #fff;
	}
	.shaixuanArea1 .tiaojian .li.active{
		color: #4F50CE;
		border: 1px solid #4F50CE;
	}
	.sxArea2{
		width: 100%;
		height: 100upx;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		margin-bottom: 100upx;
		z-index: 999;
	}
	.sxArea2 text{
		font-size: 28upx;
		color: #4F50CE;
		display: block;
		text-align: center;
		line-height: 100upx;
	}
	.sxArea2  image{
		margin-left: 10upx;
		width: 24upx;
		height: 14upx;
	}
	.fldMain{
		width: 100%;
		height: auto;
	}
	.fldMain .bookArea{
		width: 690upx;
		margin: 0 auto;
	}
	.bookArea .landscapeBook{
		width: 100%;
		height: 200upx;
		overflow: hidden;
		margin-top: 40upx;
	}
	.bookArea .landscapeBook:first-child{
		margin-top: 20upx;
	}
	.bookArea .landscapeBook image{
		float: left;
		width: 150upx;
		height: 200upx;
	}
	.lazy-image{
		width: 150upx;
		margin: 0;
		float: left;
	}
	.bookArea .landscapeBook .textIntroducte{
		width: 520upx;
		float: right;
	}
	.bookArea .landscapeBook .textIntroducte text{
		display: block;
		width: 100%;
		float: left;
	}
	.bookArea .landscapeBook .textIntroducte text.title{
		font-size: 30upx;
		color: #4B4C5D;
		margin-top: 6upx;
	}
	.bookArea .landscapeBook .textIntroducte text.introducte{
		font-size: 28upx;
		color: #818295;
		margin-top: 14upx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal !important;
	}
	.bookArea .landscapeBook .textIntroducte text.author{
		font-size: 24upx;
		color: #B3B3C1;
		margin-top: 24upx;
	}
</style>
